<template>
  <el-row :gutter="20">
    <el-col :xs="24">
      <div class="title-card first-title-card">实时安全评估</div>
    </el-col>
    <el-col :md="12" :lg="16" :xl="16">
      <div class="content-card" :style="{ height: chartheight}" id="chart_realtimeSecurityAssessment"></div>
    </el-col>
    <el-col  :md="12" :lg="8" :xl="8">
      <div class="content-card content-realtimeList">
       <div class="content-card-head">
         <div class="content-card-head-score" :style="{ color: currentColor}">{{score}}</div>
         <div class="content-card-head-tips">{{tips}}</div>
       </div>
       <el-divider></el-divider>
       <div class="content-card-content">
        <div class="content-card-content-one" v-for="(item, i) in indicatorArr" :key="i">
           <span class="content-card-content-one-title" >{{item.name}}</span>
           <template>
            <span v-if="item.value == 0" class="content-card-content-one-score color-3">✔</span>
            <span v-else class="content-card-content-one-score" style="color:#FD5E5E;">{{'-' + item.value}}</span>  
           </template>
           <el-divider></el-divider>
        </div>
        <div class="content-card-content-one">
           <span class="content-card-content-one-title" >剔除重复扣分</span>
           <span class="content-card-content-one-score" style="color:#47CFAD;">{{deductUseScore == 0 ? 0 : ('+' + deductUseScore)}}</span>
           <el-divider></el-divider>
        </div>
       </div>
       <div class="content-card-footer">
         <div class="content-card-footer-left"><span>总分</span><span style="color:rgba(47,52,68,1);padding-left:10px">100</span></div>
         <div class="content-card-footer-right"><span>扣分</span><span style="color:#FD5E5E;padding-left:10px">{{deduct == 0 ? 0 : ('-' + deduct)}}</span></div>
       </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import util from '@/utils/util'
import {getSafetyGroup} from '@/api/org'

export default {
  name: 'RealtimeSecurityAssessment',
  props: {
    detailData: {
        type: Object,
        required: false
    },
  },
  data () {
    return {
      util:util,
      chartheight:'485px',
      score:0,//得分
      deduct:0,//扣分
      deductUseScore:0,//剔除重复扣分
      indicatorArr:[],//扣分项数组
      currentColor:'#47CFAD',
      tips:'安全，请继续保持',
      chartOption:null,
      $chart:null
    }
  },
  created() {
    window.onresize = () => {
      if(this.$chart && this.chartOption ){
        this.$chart.resize();
      }
    }
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart(){
      let that = this
      that.score = that.detailData.score
      that.deduct = that.detailData.deductTotal
      that.deductUseScore = that.detailData.deductUseScore
      that.currentColor =  util.getColorByScore( that.score,1)
      if(79.9< that.score && that.score < 89.9){//风险
        that.tips = "危险，需要及时整改"
      }else if(that.score < 80){//高危
        that.tips = "告急，需要立即处理"
      }else{//安全
        that.tips = "安全，请继续保持"
      }
      that.indicatorArr = []
      let dataArr = []
      let _formatterhtml = '实时安全评估<br/>'
      for(let key in that.detailData){
        if(['1','2','3','4','5','6'].indexOf(key)>-1){
          let _obj = that.detailData[key]
          let _score =(_obj.value?parseFloat(_obj.value):0)>100?0:(100-(_obj.value?parseFloat(_obj.value):0))
          that.indicatorArr.push({
            name: _obj.groupName,
            max: 100,
            min: 0,
            value:_obj.value,
            groupId: _obj.groupId,
          })
          _formatterhtml += ( _obj.groupName+'：'+(+_obj.value==0?'':'-')+_obj.value+ '<br/>' )
          //that.deduct+=_obj.value
          dataArr.push(_score)
        }
      }
      if(dataArr.length ==0)
        return;
      that.$chart = that.$echarts.init(document.getElementById('chart_realtimeSecurityAssessment'))
      that.chartOption = {
        title: {
            text: ''
        },
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: 'rgba(0,0,0,0.8)'
            }
          },
          formatter:function(params){
            return _formatterhtml
          }

        },
        legend: {
            data: []
        },
        radar: {
            // shape: 'circle',
            splitArea:false,
            splitLine:{//一圈圈的
                lineStyle: {
                  color: ['rgba(136,144,171,0.6)'],// 使用深浅的间隔色 color: ['#aaa', '#ddd']
                  width:0.8
                },
            },
            axisLine:{//互相交错的
                lineStyle: {
                  color: ['rgba(136,144,171,0.6)'],// 使用深浅的间隔色 color: ['#aaa', '#ddd']
                  width:0.8
                },
            },
            splitNumber:4,
            name: {
                textStyle: {
                    color: '#8890AB',
                    borderRadius: 3,
                    padding: [3, 5]
               },
               formatter: function (value, indicator) {
                //return value+'  ' +("{s1|"+(indicator.value==0?'':'-')+indicator.value+"}")
                return value +'  ' +(indicator.value==0?("{s2|✔}"):("{s1|-"+indicator.value+"}")) 
                //<span data-v-4ac1fa52="" class="color-card-point iconfont icon-duigou color-3"></span>
              },
                // 在文本中，可以对部分文本采用 rich 中定义样式。
                // 这里需要在文本中使用标记符号：
                // `{styleName|text content text content}` 标记样式名。
                // 注意，换行仍是使用 '\n'。
              /*  formatter: [
                    '{a|这段文本采用样式a}',
                    '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
                ].join('\n'),*/
                rich: {
                    s1: {
                        color:'red'
                    },
                    s2: {
                        color:'green'
                    },
                },
            },
            indicator: that.indicatorArr
        },
        series: [{
            name: '实时安全评估',
            type: 'radar',
            symbol:'none',
            lineStyle: {
              normal: {
                      color: that.currentColor,
                      opacity:1
                  }
            },
            areaStyle: {
              normal: {
                  color: that.currentColor,
                  opacity:0.5
              }
            },
            data : [
                {
                    value : dataArr,
                    name : '实时安全评估'
                }
            ]
        }]
      }
      that.$chart.setOption(that.chartOption )
    },
  },   
  watch: {
    chartheight(val, oldVal) {
      if(this.$chart && this.chartOption ){
        this.$chart.resize();
      }
    },
    detailData(val) {
      if(val) {
        this.initChart()
      }
    }
  }
}
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.content-card-head{
  .content-card-head-score{
    text-align: center;
    font-size:60px;
    line-height: 70px;
  }
  .content-card-head-tips{
    text-align: center;
    font-size:16px;
    color:rgba(136,144,171,1);
  }
}
.el-divider--horizontal{
  margin:12px 0;
}
.content-realtimeList{
  height: 485px;
}
.content-card-content-one{
  font-size:16px;
  padding: 0 5px;
  .content-card-content-one-title{
    font-weight:500;
    color:rgba(47,52,68,1);
  }
  .content-card-content-one-score{
    float: right;
  }
}
.content-card-footer{
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  font-size: 16px;
  color: rgba(136,144,171,1);
  .content-card-footer-left{
    float: left;
  }
  .content-card-footer-right{
    float: right;
  }
}
</style>
